<template>
  <div class="div">
    <div class="headers">
    <div class="buttons">
      <el-button type="primary" icon="Plus" plain @click="handleAdd">添加</el-button>
      <el-button type="danger" icon="Delete" plain @click="handleDelete">删除</el-button>
      <el-button type="success" icon="Search" plain @click="handleQuery">搜索</el-button>
      <el-button icon="Download">下载板块</el-button>
      <el-button icon="Upload">批量导入</el-button>
    </div>
  </div>
  <div class="tables">
    <el-table :data="tableData" style="width: 100%" border :header-cell-style="headerCellStyle">
      <el-table-column type="selection"/>
      <el-table-column label="学校全称" align="center" prop="schoolName"/>
      <el-table-column label="学段" align="center" prop="level"/>
      <el-table-column label="招生人数" align="center" prop="srudentNumber"/>
      <el-table-column label="所在地" align="center" prop="city"/>
      <el-table-column label="具体地址" align="center" prop="Address"/>
      <el-table-column label="单位负责人" align="center" prop="leader"/>
      <el-table-column label="筛查系统负责人" align="center" prop="filterDirector"/>
      <el-table-column label="联系电话" align="center" prop="Tel"/>
      <el-table-column label="操作" align="center" prop="">
        <template #default="scope">
                   <el-button link type="primary" @click="handleEdit(scope.row)">修改</el-button>
                        <el-button link type="primary" @click="handleDelete(scope.row)">删除</el-button>
<!--          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"-->
<!--                     v-hasPermi="['system:WechatAccounts:edit']">修改-->
<!--          </el-button>-->
<!--          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"-->
<!--                     v-hasPermi="['system:WechatAccounts:remove']">删除-->
<!--          </el-button>-->
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 添加学校账号对话框 -->
  <el-dialog title="添加账号" v-model="addAccountVisible" width="500px" append-to-body>
    <el-form ref="schoolManagementRef" :model="schoolManagementForm" :rules="schoolManagementRules" label-width="80px">
      <el-form-item label="学校" prop="schoolName">
        <el-input v-model="schoolManagementForm.schoolName" placeholder="请输入学校"/>
      </el-form-item>
      <el-form-item label="学段" prop="level">
        <el-input v-model="schoolManagementForm.level" placeholder="请输入学段"/>
      </el-form-item>
      <el-form-item label="招生人数" prop="srudentNumber">
        <el-input v-model="schoolManagementForm.srudentNumber" placeholder="请输入招生人数"/>
      </el-form-item>
      <el-form-item label="所在地" prop="city">
        <el-input v-model="schoolManagementForm.city" placeholder="请输入所在地"/>
      </el-form-item>
      <el-form-item label="具体地址" prop="Address">
        <el-input v-model="schoolManagementForm.Address" placeholder="请输入具体地址"/>
      </el-form-item>
      <el-form-item label="单位负责人" prop="leader">
        <el-input v-model="schoolManagementForm.leader" placeholder="请输入单位负责人"/>
        </el-form-item>
      <el-form-item label="筛查系统负责人" prop="filterDirector">
        <el-input v-model="schoolManagementForm.filterDirector" placeholder="请输入筛查系统负责人"/>
      </el-form-item>
      <el-form-item label="联系电话" prop="Tel">
        <el-input v-model="schoolManagementForm.Tel" placeholder="请输入联系电话"/>
      </el-form-item>
      <!-- <el-form-item label="注册时间" prop="createdTime">
        <el-date-picker clearable
                        v-model="schoolManagementForm.createdTime"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择注册时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="登录时间" prop="updatedTime">
        <el-date-picker clearable
                        v-model="schoolManagementForm.updatedTime"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择登录时间">
        </el-date-picker>
      </el-form-item> -->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="addSubmitForm">确 定</el-button>
        <el-button @click="addAccountVisible=false">取 消</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 修改学校账号对话框 -->
  <el-dialog title="修改账号" v-model="editAccountVisible" width="500px" append-to-body>
    <el-form ref="editAccountRef" :model="editAccountForm" :rules="editAccountRules" label-width="80px">
      <el-form-item label="学校" prop="schoolName">
        <el-input v-model="schoolManagementForm.schoolName" placeholder="请输入学校"/>
      </el-form-item>
      <el-form-item label="学段" prop="level">
        <el-input v-model="schoolManagementForm.level" placeholder="请输入学段"/>
      </el-form-item>
      <el-form-item label="招生人数" prop="srudentNumber">
        <el-input v-model="schoolManagementForm.srudentNumber" placeholder="请输入招生人数"/>
      </el-form-item>
      <el-form-item label="所在地" prop="city">
        <el-input v-model="schoolManagementForm.city" placeholder="请输入所在地"/>
      </el-form-item>
      <el-form-item label="所在地" prop="address">
        <el-input v-model="editAccountForm.address" placeholder="请输入所在地"/>
      </el-form-item>
      <el-form-item label="单位负责人" prop="leader">
        <el-input v-model="schoolManagementForm.leader" placeholder="请输入单位负责人"/>
        </el-form-item>
      <el-form-item label="筛查系统负责人" prop="filterDirector">
        <el-input v-model="schoolManagementForm.filterDirector" placeholder="请输入筛查系统负责人"/>
      </el-form-item>
      <el-form-item label="联系电话" prop="Tel">
        <el-input v-model="schoolManagementForm.Tel" placeholder="请输入联系电话"/>
      </el-form-item>
      <!-- <el-form-item label="注册时间" prop="createdTime">
        <el-date-picker clearable
                        v-model="editAccountForm.createdTime"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择注册时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="登录时间" prop="updatedTime">
        <el-date-picker clearable
                        v-model="editAccountForm.updatedTime"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择登录时间">
        </el-date-picker>
      </el-form-item> -->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="editSubmitForm">确 定</el-button>
        <el-button @click="editAccountVisible=false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
  </div>
 
</template>

<script setup name="schoolmanagement">
import {ref} from "vue";
import {ElMessage, ElMessageBox} from 'element-plus';
// import {schoolinfoList,getSchoolinfo,delSchoolinfo,addSchoolinfo,updateSchoolinfo} from "@/api/system/schoolinfo";
// const { proxy } = getCurrentInstance();


const editAccountRef = ref({})
const addAccountVisible = ref(false)
const editAccountVisible = ref(false)
const schoolManagementForm = ref({
  id: '',
  school: '',
  address: '',
  name: '',
  phone: '',
  status: '',
  application: '',
  createdTime: '',
  updatedTime: ''
})

const editAccountForm = ref({
  id: '',
  school: '',
  address: '',
  name: '',
  phone: '',
  status: '',
  application: '',
  createdTime: '',
  updatedTime: ''
})
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: '123456',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

// 新增按钮操作
const handleAdd = () => {
  console.log(1);
  // reset();
  addAccountVisible.value = true;
  console.log(addAccountVisible.value);
}
// 修改按钮操作
const handleEdit = () => {
  // console.log('handleEdit');
  editAccountVisible.value = true;
}
//删除按钮对话框
const deleteOpen = () => {
  ElMessageBox.confirm(
      '是否确认删除该数据项?',
      '系统提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消删除',
        })
      })
}
//删除方法
const handleDelete = () => {
  deleteOpen();
  // console.log('handleDelete');
}
// 搜索方法
const handleQuery = () => {
  console.log('handleQuery')
}

//添加表单确定按钮操作
const addSubmitForm = () => {
  addAccountVisible.value = false;
}
//修改表单确定按钮操作
const editSubmitForm = () => {
  editAccountVisible.value = false;
}
//多选框操作
const handleSelectionChange = () => {
  console.log('handleSelectionChange')
}

</script>
<style scoped lang="scss">
.headers {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.buttons {
  margin-right: 20px;
}

.tables {
  padding: 20px;
}
</style>